<template>
  <div class="serviceHelp" :style="{left: clientX + 'px', top: clientY + 'px'}">
    <div class="serviceHelp_title">
      欢迎呼叫小助手：
    </div>
    <div class="close" @click="close">
      <img src="./img/close.png" alt="">
    </div>
    <div class="serviceHelp_main">
      <div class="serviceHelp_item" v-for="item in serviceHelpList" :key="item.id" @click="toHelp(item)">
        {{ item.label }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch, defineEmits } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getTime, whatTime, getWeek, times } from '@/utils/plugins'

name: "serviceHelp"

const route = useRoute()
const router = useRouter()

const props = defineProps({
  clientX: {
    type:Number,
    default: 0,
  },
  clientY:{
    type:Number,
    default: 0
  }
})

const emit = defineEmits(['close'])


const serviceHelpList = ref([
  {id: '1', label: '简介'},
  {id: '2', label: '人工客服'},
  {id: '3', label: '时间提醒'},
  {id: '4', label: '回到首页'},
  {id: '5', label: '去工具箱'},
  {id: '9', label: '敬请期待'},
])

const close = () => {
  emit('close')
}

const toHelp = (item: any) => {
  switch (item.id) {
    case '1':
    ElMessageBox.confirm('基于Element Plus UI组件库以及vite + Ts + pinia 的个人后台管理系统，提供部分个人开发功能，具体功能详见工具箱模块，该平台仍在维护中，后续功能敬请期待！', '简介', {
      type: 'success',
      confirmButtonText: '确定',
      showClose: false,
      showCancelButton: false,
      closeOnClickModal: false,
    })
      .then(() => {
        ElMessageBox.confirm('感谢支持！🙏', '鸣谢', {
          type: 'success',
          confirmButtonText: '确定',
          showClose: false,
          showCancelButton: false,
          closeOnClickModal: false,
        })
          .then(() => {

          })
          .catch((e: any) => {
            console.log(e)
          })
      })
      .catch((e: any) => {
        console.log(e)
      })
    break;
    case '2':
    ElMessage.warning(`点击了${item.label}，若无人接听请稍后再试！`)
    setTimeout(() => {
      window.location.href = 'tel:13613664196'
    }, 1000)
    break;
    case '3':
    ElMessageBox.confirm(`您正处在 ${getTime()} ${getWeek()} ${whatTime()}的 ${times('12')}`, '小助手提醒您：', {
      type: 'success',
      confirmButtonText: '我知道了',
      showClose: false,
      showCancelButton: false,
      closeOnClickModal: false,
      customClass: 'my-confirm', // 下方动态修改
      confirmButtonClass: 'my-confirm-button' // 该样式类名位于App.vue中全局生效 根节点下
    })
      .then(() => {
      })
    break;
    case '4':
    router.push('/')
    break;
    case '5':
    router.push('/tools/encryption')
    break;
    case '9':
    ElMessage.warning(`更多功能敬请期待！`)
    break;
  }
}

// 添加样式以使按钮占据整个宽度
const style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = `
  .el-message-box.my-confirm .el-message-box__btns {
    display: flex;
    justify-content: center;
  }
  .el-message-box.my-confirm .el-button--primary {
    width: 100%;
    padding: 30px;
    margin-top: 20px;
  }
`;
document.head.appendChild(style);

onMounted(() => {

})

</script>

<style lang="scss" scoped>
.serviceHelp {
    box-sizing:border-box;
    position: fixed;
    top: 10;
    left: 10;
    background-color: #364276;
    border-radius: 20px;
    // border: 1px solid #f8d447;
    opacity: 0.9;
    width: auto;
    height: auto;
    z-index:100;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    .close {
      position: absolute;
      z-index: 100;
      cursor: pointer;
      right: -20px;
      top: -20px;
      width: 25px;
      height: 25px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .serviceHelp_title {
      box-sizing:border-box;
      width: 100%;
      height: 55px;
      font-size: 18px;
      color: #f8d447;
      font-weight: 700;
      padding: 18px;
      padding-bottom: 0px;
      box-shadow: 0px 0px 20px 0px rgba(89, 56, 56, 0.2);
    }
    .serviceHelp_main {
      width: 100%;
      max-height: 200px;
      // flex: 1;
      box-sizing:border-box;
      overflow-y: scroll;
      .serviceHelp_item {
        box-sizing:border-box;
        width: 100%;
        height: 50px;
        cursor: pointer;
        font-size: 16px;
        color: #f8d447;
        font-weight: 500;
        display: flex;
        justify-content: center;
        align-items: center;
        border-bottom: 1px solid #f8d447;
        padding: 10px;
      }
      :first-child {
        border-top: 0.2px solid #f8d447;
      }
      :last-child {
        border-bottom: none;
      }
      :hover {
        color: #364276;
        background-color: #f8d447;
        border-bottom: 1px solid #f8d447;
      }
    }
}
</style>
